<template>

	<view>
		<view class="img-a">
			<view class="t-b">
				您好，
				<br />
				欢迎来到 校园考勤系统
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">手机号</text>
						<input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="phone" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="pwd" />
					</view>
					<button @tap="verify()">登 录</button>
				</form>
				<view class="t-f"><text>——— 忘记密码，请联系管理员 ———</text></view>
			</view>
		</view>
	</view>
</template>
<script>
import { wxLogin, getRouters, getInfo,login } from '@/api/login.js'
import { updateClientId } from '@/api/user.js'
export default {
	data() {
		return {
			phone: '', //手机号码
			pwd: '' //密码
		};
	},
	onLoad() {},
	mounted() {
		// #ifdef APP-PLUS
		this.loadLoginInfo()
		// #endif
	},
	methods: {
		getMessage(){
			wx.requestSubscribeMessage({
				tmplIds: ['VvNb-JONO_pnno0qW6rpXqgp9FtgmyA5G9_lzW1q8I8'],
				success (res) {
					console.log('res',res)
				}
			})
		},
		wxGetPhone(e){
			let that_ = this
			uni.login({
				provider:'weixin',
				success: function (res) {
					if (!e.detail.code) {
						uni.switchTab({
							url: '/pages/home/index'
						})
						uni.showToast({
							title: '获取手机号失败',
							icon: 'none'
						})
						return;
					}
					that_.wxLogind(e.detail.code,res.code);
				},
			})
		},
		async wxLogind(e,openidCode){
			const { data: { code, data,msg } } = await wxLogin({'xcxCode':e,'code':openidCode})
			if (code != 200) {
				uni.showToast({ title: msg, icon: 'none' })
				return
			}
			if (data && data.token) {
				this.$store.commit('login', {
					token: data.token
				})
				// 获取用户路由
				this.getRoutersData()
				// 获取用户信息
				this.getInfoData()
				uni.showToast({ title: '登录成功', icon: 'none' });
				setTimeout(() => {
					this.gotoPage('/pages/work/index', 'tab')
				}, 1000)
			}
		},
		async getInfoData(){
			const { data } = await getInfo();
			if(data.code === 200){
				uni.setStorageSync("loginInfo", data.data)
			}
		},
		async getRoutersData(){
			const { data } = await getRouters();
			if(data.code === 200){
				console.log('data.data:',data.data);
				uni.setStorageSync("routers", data.data)
			}
		},
		// 加载保存的用户手机密码
		loadLoginInfo() {
		  try {
		    const login = uni.getStorageSync("loginBody")
		    if (typeof login === "object") {
				this.phone = login.phonenumber
				this.pwd = login.password
		    }
		  } catch (error) {
		    console.log(error)
		  }
		},
		//当前登录按钮操作
		verify() {
			var that = this;
			if (!that.phone) {
				uni.showToast({ title: '请输入您的手机号', icon: 'none' });
				return;
			}
			if(!uni.$u.test.mobile(that.phone)){
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			if (!that.pwd) {
				uni.showToast({ title: '请输入您的密码', icon: 'none' });
				return;
			}
			this.submit()
		},
		async submit() {
		  try {
			const loginData = { phonenumber: this.phone, password: this.pwd}
		    const { data: { code, data,msg } } = await login(loginData)
		    if (code != 200) {
		      uni.showToast({ title: msg, icon: 'none' })
		      return
		    }
		    if (data && data.token) {
		      this.$store.commit('login', {
		        token: data.token
		      })
			  // 保持账户密码缓存
			  uni.setStorageSync("loginBody", loginData)
			  // 获取用户路由
			  this.getRoutersData()
			  // 获取用户信息
			  this.getInfoData()
			  // 设置用户的clientid
			  // #ifdef APP-PLUS
			  plus.push.getClientInfoAsync((info) => {
				  console.log('info:',info);
			    let cid = info["clientid"];
				console.log('cid:',cid);
				this.updateCid(cid)
			  });
			  // #endif
			  uni.showToast({ title: '登录成功', icon: 'none' });
			  setTimeout(() => {
			  	this.gotoPage('/pages/work/index', 'tab')
			  }, 1000)
		    }
		  } catch (error) {
		    console.log(error, 'error')
		  }
		},
		async updateCid(cid){
			const { data } = await updateClientId(cid)
			console.log('這又是啥啦：',data);
		},
		// 返回到上一个页面
		goBack(){
			uni.switchTab({
				url: '/pages/home/index'
			})
		}
	}
};
</script>
<style>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 550rpx;
	background-image: url("https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/9f53ed66a4d343e4b727c5f05d165129.jpg");
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-b-wx{
	text-align: left;
	font-size: 42rpx;
	color: #222222;
	padding: 30rpx 0 30rpx 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.agreement {
	display: flex;
	flex-direction: row;
	/* justify-content: center; */
	align-items: center;
	font-size: 30rpx;
	/* margin-top: 10rpx; */
	margin-bottom: 80rpx;
	color: #909399;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}
</style>